<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>
    <head th:insert="~{import :: head}"></head>
    <link rel="stylesheet" href="/css/fileinput.css" media="all"  type="text/css" />
    <link href="/js/avatar/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="/js/avatar/plugins/piexif.js" type="text/javascript"></script>
    <script src="/js/avatar/plugins/sortable.js" type="text/javascript"></script>
    <script src="/js/avatar/plugins/fileinput.js" type="text/javascript"></script>
    <script src="/js/avatar/plugins/zh.js" type="text/javascript"></script>
    <script src="/js/avatar/fa/theme.js" type="text/javascript"></script>
    <script src="/js/avatar/explorer-fa/theme.js" type="text/javascript"></script>
</head>
<body>
<div th:insert="~{head :: nav}"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="container-fluid main_info">
    <h3  class="user_title">个人资料</h3>
    <div  class="user_info">
        <img    data-toggle="modal"  data-target="#uploadModal" class="img-circle" th:src="${userInfo.avatarUrl!=null?userInfo.avatarUrl:'/images/gua.jpg'}" alt="" id="avatar_img" style="width: 110px;height: 110px">
        <label    data-toggle="modal"  data-target="#uploadModal" class="modify">修改头像</label>
    </div>
    <div class="right_c">
        <div class="id_card" >
            <a  href="" target="_blank" class="user_home">我的问题</a>
        </div>
        <div  class="line"></div>
        <div  class="nick"><span >昵称：</span><span  th:text="${userInfo.accountId}"></span>
            <a href="javascript:void(0)" class="mod" data-toggle="modal" data-target="#exampleModal" >修改资料</a>
        <div  class="nick"><span >实名：</span><span id="sname" th:text="${userInfo.name}"></span> </div>
        <div  class="nick"><span >性别：</span><span id="ssex" th:text="${userInfo.sex ==1? '女':'男' }"></span> </div>
        <div  class="nick"><span >邮箱：</span><span id="semail" th:text="${userInfo.email}"></span> </div>
        <div  class="nick"><span >简介：</span><span id="sbio" th:text="${userInfo.bio}"></span> </div>
    </div>
    </div>
</div>

<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h4 class="modal-title">上传头像</h4>
            </div>
            <form action="" method="post">
                <input type="file"   id="avatar_file" name="file" class="file">
            </form>
        </div>
    </div>
</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">修改资料</h4>
            </div>
            <div class="modal-body">
                <form id="userInfo" >
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">昵称:</label>
                        <input  th:value="${userInfo.accountId}"  type="text" style="display: inline;width: 35%;" class="form-control" id="recipient-name" readonly="readonly" name="accountId">
                        <input type="hidden" name="id"  th:value="${userInfo.id}">
                        <span  class="msg">唯一ID</span>
                    </div>
                    <div class="form-group">
                        <label for="name" class="control-label">实名:</label>
                        <input  th:value="${userInfo.name}"type="text" style="display: inline;width: 35%;" class="form-control" id="name" name="name" >
                    </div>
                    <div class="form-group">
                        <label for="sex" class="control-label">性别:</label>
                        <select  name="sex" id="sex" class="sex_select">
                            <option  th:selected="${userInfo.sex==0}"  value="0">男</option>
                            <option  th:selected="${userInfo.sex==1}"  value="1">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="email" class="control-label">邮箱:</label>
                        <input type="text"  th:value="${userInfo.email}" style="display: inline;width: 35%;" class="form-control" id="email" name="email">
                    </div>
                    <div class="form-group">
                        <label for="bio" class="control-label">简介:</label>
                        <textarea   th:text="${userInfo.bio}"  class="form-control" id="bio" name="bio"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button"  onclick="update()"   class="btn btn-primary">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>
<script src="/js/userinfo.js" type="application/javascript"></script>
<script src="/js/Live2D.js" type="application/javascript"></script>
</body>
</html>